<template>
	<view class="container">
		<!-- 无申请时显示申请表单 -->
		<view class="request-form" v-if="!requestData">
			<view class="form-header">
				<text class="form-title">提交申请</text>
			</view>

			<view class="form-item">
				<text class="form-label">申请人:</text>
				<text class="form-value">{{userInfo.name}}</text>
			</view>

			<view class="form-item">
				<text class="form-label">寝室号:</text>
				<text class="form-value">{{dormInfo.dorid}}</text>
			</view>

			<view class="form-item">
				<text class="form-label">申请类型:</text>
				<picker class="picker" @change="bindTypeChange" :value="typeIndex" :range="requestTypes">
					<view class="picker-value">
						{{requestTypes[typeIndex]}}
						<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<view class="form-item full-width">
				<text class="form-label">申请详情:</text>
				<textarea class="textarea" v-model="requestContent" placeholder="请详细描述您的申请(不超过1000字)"
					maxlength="1000"></textarea>
				<text class="word-count">{{requestContent.length}}/1000</text>
			</view>

			<button class="submit-btn" @click="submitRequest">提交申请</button>
		</view>

		<!-- 有未受理申请时显示详情 -->
		<view class="request-detail" v-else-if="requestData && !requestData.isProcessd">
			<view class="detail-header">
				<text class="detail-title">申请详情</text>
				<text class="status-tag status-pending">未受理</text>
			</view>

			<view class="detail-item">
				<text class="detail-label">申请人:</text>
				<text class="detail-value">{{requestData.applicant}}</text>
			</view>

			<view class="detail-item">
				<text class="detail-label">寝室号:</text>
				<text class="detail-value">{{requestData.dorid}}</text>
			</view>

			<view class="detail-item">
				<text class="detail-label">申请类型:</text>
				<text class="detail-value">{{requestData.type}}</text>
			</view>

			<view class="detail-item">
				<text class="detail-label">申请时间:</text>
				<text class="detail-value">{{requestData.createTime}}</text>
			</view>

			<view class="detail-item full-width">
				<text class="detail-label">申请详情:</text>
				<text class="detail-value content">{{requestData.content}}</text>
			</view>

			<view class="action-buttons">
				<button class="modify-btn" @click="modifyRequest">修改申请</button>
				<button class="cancel-btn" @click="cancelRequest">撤销申请</button>
			</view>
		</view>

		<!-- 有已受理申请时显示详情 -->
		<view class="request-detail" v-else-if="requestData && requestData.isProcessd">
			<view class="detail-header">
				<text class="detail-title">申请详情</text>
				<text class="status-tag status-processed">已受理</text>
			</view>

			<view class="detail-item">
				<text class="detail-label">申请人:</text>
				<text class="detail-value">{{requestData.applicant}}</text>
			</view>

			<view class="detail-item">
				<text class="detail-label">寝室号:</text>
				<text class="detail-value">{{requestData.dorid}}</text>
			</view>

			<view class="detail-item">
				<text class="detail-label">申请类型:</text>
				<text class="detail-value">{{requestData.type}}</text>
			</view>

			<view class="detail-item">
				<text class="detail-label">申请时间:</text>
				<text class="detail-value">{{requestData.createTime}}</text>
			</view>

<!-- 			<view class="detail-item">
				<text class="detail-label">受理时间:</text>
				<text class="detail-value">{{requestData.processTime}}</text>
			</view> -->

			<view class="detail-item full-width">
				<text class="detail-label">申请详情:</text>
				<text class="detail-value content">{{requestData.content}}</text>
			</view>

			<view class="admin-info">
				<text class="info-title">宿管信息</text>
				<view class="info-item">
					<text class="info-label">姓名:</text>
					<text class="info-value">{{requestData.admin.name}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">电话:</text>
					<text class="info-value">{{requestData.admin.phone}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">邮箱:</text>
					<text class="info-value">{{requestData.admin.email}}</text>
				</view>
			</view>

			<button class="confirm-btn" @click="confirmComplete">确认解决</button>
		</view>
	</view>
</template>

<script>
import { addApply, cancelApply, getApply, getHomemaster } from '../../utils/back';

	export default {
		data() {
			return {
				userInfo: {
				  name: uni.getStorageSync("name"),
				  sex: uni.getStorageSync("sex"),
				  dept: uni.getStorageSync("dept"),
				  phone: uni.getStorageSync("phoneNum"),
				  email: uni.getStorageSync("email")
				},
				dormInfo: {
				  dorid: uni.getStorageSync("dorid"),
				},
				requestTypes: ["寝室器材损坏", "公共器材损坏", "更换寝室", "更改个人信息"],
				typeIndex: 0,
				requestContent: "",
				requestData: null // 初始为null，模拟从后端获取数据
			}
		},
		onShow() {
			// 模拟从后端获取申请数据
			this.fetchRequestData();
		},
		methods: {
			async fetchRequestData() {
				// 这里应该是从后端API获取数据
				// 模拟数据，实际开发中替换为API调用
				let res = await getApply(uni.getStorageSync("id"))
				this.requestData = null
				console.log(res);
				if(res){
					this.requestData = {
						id: res.id,
						hmid: res.hmid,
						applicant: uni.getStorageSync("name"),
						dorid: uni.getStorageSync("dorid"),
						type: res.type,
						content: res.infor,
						createTime: res.date,
						isProcessd: false,
						isSolve: res.isSolve,
					}
				}
				if(res.hmid){
					let hm = await getHomemaster(res.hmid)
					console.log(hm);
					this.requestData.isProcessd = true
					this.requestData = {
						admin:{
							name:hm.name,
							phone:hm.phone,
							email:hm.email
						},
						...this.requestData
					}
				}
			},
			bindTypeChange(e) {
				this.typeIndex = e.detail.value;
			},
			async submitRequest() {
				if (!this.requestContent.trim()) {
					uni.showToast({
						title: '请填写申请详情',
						icon: 'none'
					});
					return;
				}
				
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth()+1
				let day = date.getDate()
				date = ''+year+'-'+(month<10?'0'+month:month)+'-'+(day<10?'0'+day:day)
				let apply = {
					sid: uni.getStorageSync("id"),
					type: this.requestTypes[this.typeIndex],
					infor: this.requestContent,
					date
				}
				
				uni.showLoading({
					title: '提交中...'
				});
				
				let res = await addApply(apply)
				
				if(res){
					uni.showToast({
						title:"添加成功！",
						icon:'success'
					})
					this.fetchRequestData()
				}else
					uni.showToast({
						title:"添加失败！",
						icon:'error'
					})
				uni.hideLoading();
			},
			async cancelRequest() {
				uni.showModal({
					title: '提示',
					content: '确定要撤销此申请吗?',
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							});
							let res = await cancelApply(this.requestData.id)
							if(res){
								uni.showToast({
									title:"撤销成功！",
									icon:'success'
								})
								this.fetchRequestData()
							}else
								uni.showToast({
									title:"撤销失败！",
									icon:'error'
								})
							uni.hideLoading();
						}
					}
				});
			},
			modifyRequest() {
				// 跳转到修改页面，待您要求后再实现
				uni.navigateTo({
					url:`/pages/editApply/editApply?requestData=${JSON.stringify(this.requestData)}`
				})
			},
			confirmComplete() {
				uni.showModal({
					title: '确认',
					content: '确认此问题已解决?',
					success: async(res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中...'
							});
							let res = await cancelApply(this.requestData.id)
							if(res){
								uni.showToast({
									title:"成功！",
									icon:'success'
								})
								this.fetchRequestData()
							}else
								uni.showToast({
									title:"失败！",
									icon:'error'
								})
							uni.hideLoading();
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 申请表单样式 */
	.request-form {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.form-header {
		margin-bottom: 40rpx;
	}

	.form-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		position: relative;
		padding-left: 20rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 8rpx;
			height: 36rpx;
			background-color: #07c160;
			border-radius: 4rpx;
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 32rpx;

		&.full-width {
			flex-direction: column;
			align-items: flex-start;
		}

		.form-label {
			color: #666;
			width: 150rpx;
			margin-bottom: 15rpx;
		}

		.form-value {
			color: #333;
		}
	}

	.picker {
		flex: 1;
	}

	.picker-value {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
	}

	.textarea {
		width: 100%;
		height: 300rpx;
		padding: 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 30rpx;
		margin-top: 0;
	}

	.word-count {
		display: block;
		text-align: right;
		font-size: 26rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.submit-btn {
		margin-top: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #07c160;
		border-radius: 45rpx;

		&::after {
			border: none;
		}
	}

	/* 申请详情样式 */
	.request-detail {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.detail-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.detail-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		position: relative;
		padding-left: 20rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 8rpx;
			height: 36rpx;
			background-color: #07c160;
			border-radius: 4rpx;
		}
	}

	.status-tag {
		font-size: 26rpx;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
	}

	.status-pending {
		background-color: #ff9900;
		color: #fff;
	}

	.status-processed {
		background-color: #07c160;
		color: #fff;
	}

	.detail-item {
		display: flex;
		margin-bottom: 25rpx;
		font-size: 30rpx;

		&.full-width {
			flex-direction: column;
		}

		.detail-label {
			color: #666;
			width: 150rpx;
		}

		.detail-value {
			color: #333;
			flex: 1;

			&.content {
				margin-top: 10rpx;
				line-height: 1.6;
			}
		}
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;

		button {
			width: 48%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			border-radius: 40rpx;

			&::after {
				border: none;
			}
		}
	}

	.modify-btn {
		background-color: #0e70f0;
		color: #fff;
	}

	.cancel-btn {
		background-color: #ff4d4f;
		color: #fff;
	}

	.confirm-btn {
		margin-top: 50rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		background-color: #07c160;
		border-radius: 45rpx;

		&::after {
			border: none;
		}
	}

	.admin-info {
		margin-top: 40rpx;
		padding-top: 30rpx;
		border-top: 1rpx dashed #eee;

		.info-title {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.info-item {
			display: flex;
			margin-bottom: 20rpx;
			font-size: 30rpx;

			.info-label {
				color: #666;
				width: 100rpx;
			}

			.info-value {
				color: #333;
				flex: 1;
			}
		}
	}
</style>